<template>
  <view class="container">
    <view
      class="px-[16rpx] py-[24rpx] bg-white"
      @click="goPage('/bundle/pages/search/index')"
    >
      <u-search
        :show-action="false"
        placeholder="请输入搜索内容"
        height="70"
        v-model="keyword"
        disabled
      ></u-search>
    </view>

    <view class="main flex">
      <view class="w-full h-full flex">
        <scroll-view
          scroll-y="true"
          class="box-border w-[235rpx] pt-[10rpx] h-full bg-white"
        >
          <block v-for="(item, index) in listData" :key="item.id">
            <view
              class="
                w-[180rpx]
                py-3
                px-2
                w-full
                text-[#555] text-center text-base
              "
              :class="{ active: index === current }"
              @click="changeCategory(index)"
            >
              {{ item.name }}
            </view>
          </block>
        </scroll-view>

        <view class="w-full">
          <z-paging
            ref="paging"
            v-model="categoryData"
            @query="queryList"
            :fixed="false"
            height="100%"
            :show-loading-more-no-more-view="false"
          >
            <!-- Content Start -->
            <view class="px-[20rpx] py-[20rpx] w-full h-full">
              <template v-if="categoryData.length">
                <card :cateData="categoryData" />
              </template>
            </view>
            <!-- Content End -->
          </z-paging>
        </view>
      </view>
    </view>

    <tabbar />
  </view>
</template>

<script lang="ts" setup>
import { ref, shallowRef } from "vue";
import Card from "./component/card.vue";
import { onLoad } from "@dcloudio/uni-app";
import tabbar from "@/components/tabbar/tabbar.vue";
import { apiCategoryLists } from "@/api/store";

const categoryData = ref<any[]>([]);
const listData = ref<any[]>();
const current = ref(0);
const paging = shallowRef();

const queryList = async (pageNo: number, pageSize: number) => {
  try {
    const lists = await apiCategoryLists();
    listData.value = lists;
    paging.value.setLocalPaging(lists[current.value].childrens);
  } catch (e) {
    console.log("报错=>", e);
    //TODO handle the exception
    paging.value.setLocalPaging(false);
  }
};

const goPage = (url: string) => {
  uni.navigateTo({
    url: url,
  });
};

const changeCategory = (index: any) => {
  current.value = index;
  paging.value?.reload();
};

onLoad(() => {
  paging.value?.reload();
});
/** Life Cycle End **/
</script>

<style lang="scss">
.container {
  display: flex;
  height: 100vh;
  overflow: hidden;
  flex-direction: column;

  .main {
    flex: 1;
    min-height: 0;
    overflow: scroll;

    // 左侧菜单分类
    .active {
      font-weight: 500;
      color: $color-primary;
      position: relative;
    }

    .active::before {
      content: "";
      height: 30rpx;
      width: 6rpx;
      position: absolute;
      left: 10rpx;
      top: 50%;
      transform: translateY(-50%);
      background-color: $color-primary;
    }
  }
}
</style>
